<template>
  <div id="app">
    <header class="wrap-header">
      <div class="left">
        <img
          src="./img/搜索.png"
          class="icon"
          alt="搜索"
        >
      </div>
      <div class="center" @click="bigTime">
        <p class="time">{{today}}</p>
        <img
          src="./img/下.png"
          class="icon"
          alt=""
        >
      </div>
      <div class="right">
        <img
          src="./img/问号.png"
          class="icon"
          alt=""
        >
        <span class="day">今天</span>
        <img
          src="./img//加号.png"
          class="icon add"
          alt=""
        >
      </div>
    </header>
    <div class="date-wrap">
      <div class="content">
        <div class="week" v-if="show">
          <ul>
            <li v-for="(item,index) of smallDate" :key="index" :class="{smallActive:item.day==d}">
              <p>{{item.week}}</p>
              <p class="day">{{item.day}}</p>
              <p class="dian"></p>
            </li>
          </ul>
        </div>
        <div class="week bigWeek" v-else>
          <ul>
            <li v-for="(item,index) of week" :key="index" :class="{active:item.day==d}">
              <p>{{item}}</p>
            </li>
          </ul>
          <div class="date" v-html="date"></div>
        </div>
      </div>
    </div>
    <div class="status-wrap">
      <p class="title">身份:</p>
      <ul>
        <li v-for="(item,index) of status" :key="index">
          {{item}}
        </li>
      </ul>
      <div class="lower" @click="selectStatus">
        <img src="./img/下箭头.png" class="icon" alt="">
      </div>
      <div class="add">
        <img src="./img/小加号.png" class="icon" alt="">
      </div>
      <div class="statusAdd" v-show="statusShow">
        <div class="status-select">
          <p v-for="(item,index) of newStatus" :key="index">
            {{item}}
          </p>
        </div>
      </div>
    </div>
    <div class="status-wrap">
      <p class="title">类型:</p>
      <ul>
        <li v-for="(item,index) of type" :key="index">
          {{item}}
        </li>
      </ul>
      <div class="lower" @click="selectType">
        <img src="./img/下箭头.png" class="icon" alt="">
      </div>
      <div class="add">
        <img src="./img/小加号.png" class="icon" alt="">
      </div>
      <div class="statusAdd" v-show="typeShow">
        <div class="status-select">
          <p v-for="(item,index) of newType" :key="index">
            {{item}}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > 50 ? 50 : fontSize
  html.style.fontSize = fontSize + 'px'
})
export default {
  data() {
    return {
      d: new Date().getDate(),
      week: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
      today: new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate(),
      show: true,
      status: [],
      newStatus: [],
      statusShow: false,
      typeShow: false,
      type: [],
      newType: []
    }
  },
  methods: {
    //获取某个月的最后一天
    getEndDay(year, month) {
      //要想知道这个月有多少天，必需知道年份与月份
      return new Date(year, month, 0).getDate()
    },
    //获取到某个月第一天是星期几
    getWeek(year, month) {
      //要知道年份与月份，日期设为1
      return new Date(year, month, 1).getDay()
    },
    bigTime() {
      this.show = !this.show
    },
    selectStatus() {
      this.statusShow = !this.statusShow
    },
    selectType() {
      this.typeShow = !this.typeShow
    },
    statusFn() {
      this.statusArr = ['交办人','经办人','证人','外围人','客户','供应商','领导']
      if(this.statusArr.length > 4){
        this.status = this.statusArr.slice(0,4)
        this.newStatus.push(this.statusArr.slice(4,this.statusArr.length))
      }
      this.newStatus = this.newStatus[0]
    },
    typeFn(){
      this.typeArr = ['必须做','提醒','最新','完成','归档','其它','自定义','AAA']
      if(this.typeArr.length > 5){
        this.type = this.typeArr.slice(0,5)
        this.newType.push(this.typeArr.slice(5,this.typeArr.length))
      }
      this.newType = this.newType[0]
    }
  },
  mounted() {
    this.statusFn()
    this.typeFn()
  },
  computed: {
    date() {
      var d = new Date()
      //上个月的最后一天
      var lastEndDay = this.getEndDay(d.getFullYear(), d.getMonth())
      //本月的最后一天
      var curEndDay = this.getEndDay(d.getFullYear(), d.getMonth() + 1)
      //这个月的第一天是星期几
      var week = this.getWeek(d.getFullYear(), d.getMonth())
      //这个代表下个月的日期
      var nextDay = 1;
      var dayStr = '';
      //问题：如果这个月的第一天是周日，那样话，系统的日历会把第一行全部变成灰色。所以这个要单独处理一下
      //原因：因为周日的话，week的值就为0，那第一个if就不会走。
      //解决办法：如果week为0的话，把它的值改为7，就会走if条件，那上面会出一行灰色的字
      week = week == 0 ? 7 : week;
      for (var i = 0; i < 42; i++) {
        if (i < week) {
          //上个月的日期
          dayStr = '<span style="color:#ccc">' + (lastEndDay--) + '</span>' + dayStr;
        } else if (i >= week + curEndDay) {
          //下个月的日期
          dayStr += '<span style="color:#ccc">' + (nextDay++) + '</span>';
        } else {
          //本月的日期
          var cl = (i - week + 1) == d.getDate() ? 'active' : '';
          dayStr += '<span class="' + cl + '">' + (i - week + 1) + '</span>';
        }
      }
      return dayStr
    },
    smallDate() {
      var d = new Date()
      let week = d.getDay()
      let day = d.getDate()
      let minDay = 0;
      let maxDay = 0;
      for(var i=0;i<7;i++){
        if(week>0){
          week--
          minDay = --day
        }else{
          maxDay = ++day
        }
      }
      let arr = []
      let dateObj = []
      for(var i=minDay;i<=maxDay;i++){
        arr.push(i)

      }
      for(var i=0;i<arr.length;i++){
        dateObj.push({day:arr[i],week:this.week[i]})
      }
      return dateObj
    }
  }
}
</script>

<style lang="sass">
$text-active-color: #36d6c9

#app
.wrap-header
  height: 1.3333rem
  padding: 0 .2667rem
  display: flex
  justify-content: space-between
  align-items: center
  .icon
    width: 30px
  .left
    flex: 1
  .center
    flex: 1
    display: flex
    justify-content: center;
    .icon
      flex: 0 0 auto
      width: .4rem
      height: .4rem
      align-self: center
    .time
      font-size: .426667rem
  .right
    flex: 1
    display: flex
    justify-content: flex-end
    align-items: center
    .icon
      width: .5333rem
      height: .5333rem
    .day
      font-size: .426667rem
      color: $text-active-color
      margin-right: 0 .1333rem
    .add
      width: 30px
      height: 30px
.date-wrap
  .week
    background-color: #f2f2f2
    ul
      display: flex
      justify-content: space-between
      li
        color: #999
        padding: 0.32rem .4267rem
        font-size: .32rem
        width: 14.3%
        text-align: center
        flex: 1
        .day
          padding-top: .3rem
        .dian
          width: 5px
          height: 5px
          background-color: #fff
          border-radius: 50%
          margin: 5px auto 0
        &.smallActive
          background-color: $text-active-color
          color: #fff
  .bigWeek
    background-color: $text-active-color
    p
      color: #fff
  .date,.small-date
    display: flex
    flex-wrap: wrap
    justify-content: space-around
    font-size: .3733rem
    margin-top: .4rem
    span
      width: 13%
      height: 1rem
      text-align: center
      line-height: 1rem
      color: #fff
    .active
      background-color: #fff
      color: #333
.status-wrap
  position: relative
  display: flex
  align-items: center
  margin-top: .5rem
  padding: 0 .3rem
  font-size: .32rem
  .title
    width: 1rem
    color: #1977d2
    margin-right: .2rem
  ul 
    display: flex
    width: 100%
    li
      border: .02rem solid #ccc
      flex: 1
      height: .8rem
      line-height: .8rem
      text-align: center
      margin: 0 .1rem
      border-radius: 5px
      color: #555
  .lower
    display: flex
    text-align: center
    border: 1px solid #ccc
    height: .7rem
    align-items: center
    margin: 0 .1rem
    margin-left: .3rem
    img
      width: .3rem
      height: .4rem
      line-height: .7rem
      ver
  .add img
    width: .6rem
  .statusAdd
    position: absolute;
    background-color: #fff
    z-index: 100
    right: .8rem
    top: 1rem
    .status-select
      display:flex
      flex-direction: column
      border: 1px solid #ccc
      padding: .16rem .133333rem
      p
        border: 1px solid #ccc
        font-size: .32rem
        color: #555
        text-align: center
        line-height: .8rem
        padding: 0 .133333rem
        &:nth-child(2)
          margin: .133333rem 0
</style>
